<!DOCTYPE html>
<html>
<head>
    <title>极坐标</title>
</head>
<body>
    <canvas id="canvas" width="800" height="600">Your browser not support Canvas!</canvas>
<script type="text/javascript">
    var c = document.getElementById("canvas");
    var ctx = c.getContext("2d");

    var bigBall;
    var balls = [];

    function getRandomNumber(min,max){
        return min + Math.floor(Math.random()*(max - min +1));
    }

    function initBigBall(x,y,r){
        bigBall ={
            x:x,
            y:y,
            r:r
        }
    }
    function initBalls(x,y,r,sum){
        for(var i=0;i<sum;i++){
            var ball = {
                x:x,
                y:y,
                r:r,
                v:getRandomNumber(50,200),
                direction:(getRandomNumber(0,360)/360.0)*2*Math.PI
            }
            balls.push(ball);
            //console.log("balls.length:" + balls[i].direction);
        }
    }

    function motion(){
        var cycle = 20;
        var s = setInterval(function(){
            ctx.fillStyle = "rgba(0,0,0,.3)";
            //ctx.fillStyle = "#fff";
            ctx.fillRect(0,0,c.width,c.height);

            //画大圆
            ctx.strokeStyle = "#fff";
            ctx.beginPath();
            ctx.arc(bigBall.x,bigBall.y,bigBall.r,0,Math.PI*2,true);
            ctx.closePath();
            ctx.stroke();

            ctx.fillStyle = "#fff";
            for(var t in balls){
//                console.log("balls.x:" + balls[t].x);

                var x2 = balls[t].x - bigBall.x;
                var y2 = balls[t].y - bigBall.y;

                var distance = Math.sqrt(x2*x2 + y2*y2);


                //if(Math.round(Math.pow(balls[t].x - bigBall.x,2)) + Math.round(Math.pow(balls[t].y - bigBall.y,2)) >= Math.round(Math.pow(bigBall.r - balls[t].r,2))){
                if(Math.round(x2*x2 + y2*y2) >= Math.round(Math.pow(bigBall.r - balls[t].r,2))){
                    var cD = balls[t].direction;

                    var step = Math.acos((balls[t].x - bigBall.x)/distance);
                    if(balls[t].y > bigBall.y){
                        balls[t].direction = -cD - Math.PI + 2*step;
                    }
                    else {
                        balls[t].direction = -cD + Math.PI - 2*step;
                    }
                }

                var dx = Math.round(Math.cos(balls[t].direction))*balls[t].v;
                var dy = Math.round(Math.sin(balls[t].direction))*balls[t].v;

                balls[t].x += dx*cycle/1000;
                balls[t].y += dy*cycle/1000;

                //console.log("balls[t].direction:" + balls[t].direction);

                ctx.beginPath();
                ctx.arc(balls[t].x,balls[t].y,balls[t].r,0,2*Math.PI,true);
                ctx.closePath();
                ctx.fill();

            }
        },cycle);

    }

    initBigBall(300,250,190);
    initBalls(300,250,10,2);

//    initBigBall(400,300,200);
//    initBalls(400,300,2,2000);


    motion();

</script>
</body>
</html>